<template>
  <!-- 本周热榜区域 -->
  <div class="week-hot-area">
    <!-- 本周热榜title -->
    <div class="week-hot-title">
      <span class="week-hot-icon iconfont">&#xe61f;</span>
      <span class="week-hot-text">本周热门榜单</span>
    </div>
    <!-- 本周热榜地方列表 -->
    <ul class="week-hot-place">
      <li class="place-detail" v-for="(item,index) in weekHotList" :key="index">
        <div class="top-level" v-if="item.level">
          <img :src="item.level">
        </div>
        <img class="place-img" :src="item.url" />
          <span class="place-name">{{item.title}}</span>
          <div class="unit-price-start">
            <span class="unit">￥</span><span class="price">{{item.price+'.0'}}</span><span class="start">起</span>
          </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['weekHotList']
}
</script>

<style lang="stylus" scoped>
/* 本周热榜 */
.week-hot-icon {
  color: tomato
  font-size:0.4rem
}
.week-hot-title {
  margin: 0.2rem 0 0.5rem 0.2rem
}
.week-hot-text{
  font-size: 0.32rem
}
.week-hot-area {
  border-top: 0.2rem solid #f5f3f3
}
.week-hot-place {
  padding: 0 .14rem
  display: flex
  flex-flow: row nowrap
  overflow-x: scroll;
  overflow-y: hidden
  margin-right:0.14rem
}

.place-detail {
  padding-top: 0.07rem
  position: relative
  display: flex
  flex-direction: column
  align-items: center
  margin-right:0.14rem
}
.place-img {
  width: 2rem
}
.place-name {
  margin-top: 0.2rem
  font-size: .24rem;
}
.unit-price-start {
  margin-bottom: 0.5rem
}
.top-level {
  border: 0
  position: absolute
  top: 0;
  left: 0;
  width: .84rem;
  height: .4rem;
  z-index: 1;
  border-radius: 0.04rem
}
.top-level img {
  width: 100%
}
.unit {
  font-size: .24rem;
  line-height: .36rem;
  text-align: center;
  color: #ff8300;
}
.price {
  font-size: .28rem;
  color: #ff8300;
  margin-left: -0.03rem
}
.start {
  font-size: .24rem;
  line-height: .36rem;
  text-align: center;
  color: #616161
}
</style>
